<template>
  <el-row :gutter="16">
    <el-col :span="6">
      <deptOption @select="selectDept" />
    </el-col>
    <el-col :span="18">
      <el-card>
        <el-form inline>
          <el-form-item label="关键字">
            <el-input v-model="searchForm.keywords" placeholder="用户名/昵称/手机号" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" style="width: 160px;" placeholder="请选择">
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-button @click="getList" type="primary">搜索</el-button>
        <el-button @click="resetSearchForm">重置</el-button>
      </el-card>
      <el-card style="margin: 16px auto;">
        <el-table :data="list">
          <el-table-column type="selection" align="center"  />
          <el-table-column prop="id" label="编号" align="center" />
          <el-table-column prop="username" label="用户名" align="center" width="200" />
          <el-table-column prop="nickname" label="昵称" align="center" width="200" />
          <el-table-column prop="genderLabel" label="性别" align="center"  />
          <el-table-column prop="deptName" label="部门" align="center" width="200" />
          <el-table-column prop="mobile" label="手机号" align="center" width="200" />
          <el-table-column label="状态" align="center" >
            <template #default="{ row }">
              <el-tag v-if="row.status === 1" type="success">启用</el-tag>
              <el-tag v-else type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" align="center" width="200" />
          <el-table-column label="操作" width="160" align="center" fixed="right">
            <template #default="{ row }">
              <el-button text type="primary" size="small">编辑</el-button>
              <el-button text type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import request from "@/utils/request"
import deptOption from './deptOption.vue';

const searchForm = ref({
  pageNum: 1,
  pageSize: 10,
  keywords:"",
  status: "",
  deptId:""
})
const list = ref([]);
const total = ref(0);
const getList = () => {
  request.get("/api/v1/users/page",{
    params:searchForm.value
  }).then(res => {
    console.log(res.data);
    list.value = res.data.list;
    total.value = res.data.total;
  })
}
getList();
const selectDept = (deptId) => {
  searchForm.value.deptId = deptId;
  getList();
}
const resetSearchForm = () => {
  searchForm.value = {
    pageNum: 1,
    pageSize: 10,
    keywords:"",
    status: "",
    deptId:""
  }
  getList();
}

</script>